<template>
  <el-dialog :title="title" class="gl_dialog_TitleLine gl_dl_footer" :visible.sync="dialogVisible" :before-close="close" width="660px">
    <div class="gl_mb_15">
      <el-form ref="form" label-position="right" :rules="rules" style="width:60%" label-width="150px" :model="formData">
        <el-form-item prop="name" label="认证等级名称">
          <el-input v-model="formData.name" placeholder="请输入认证等级名称" size="mini" clearable />
        </el-form-item>
        <el-form-item prop="competitionLevelId" label="认证等级范围">
          <el-select v-model="formData.competitionLevelId" size="mini" style="width: 100%" placeholder="请选择认证等级的行政范围" clearable filterable>
            <el-option v-for="item in levels" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close()">取 消</el-button>
      <el-button :loading="loading" size="mini" type="primary" @click="addOrEdit()">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import validator from '@/lib/validate/index.js';
import {
  api_GET_EventsManagementCompetitionLevel, // 获取赛事级别
  api_POST_EventsManagementCompetitionCertificationLevel, // 添加认证等级
  api_PUT_EventsManagementCompetitionCertificationLevelId // 修改认证等级
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'AddGrade',
  props: {
    title: { // 弹窗标题
      type: String,
      default: ''
    },
    rowId: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      levels: [],
      rules: {
        name: [
          validator.required('认证等级名称不能为空')
        ],
        competitionLevelId: [
          validator.required('认证等级范围不能为空')
        ]
      }
    };
  },
  created() {
    this.getLevel();
  },
  methods: {
    // 打开弹窗
    open() {
      this.dialogVisible = true;
    },
    // 关闭弹窗
    close() {
      this.$refs['form'].resetFields();
      this.dialogVisible = false;
    },
    getLevel() {
      api_GET_EventsManagementCompetitionLevel().then(res => {
        this.levels = res.items;
      }).catch(() => {
        that.$message({
          type: 'error',
          message: '获取认证等级范围'
        });
      });
    },
    // 新增 or 编辑
    addOrEdit() {
      var that = this;
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          if (that.title === '新增认证等级') {
            api_POST_EventsManagementCompetitionCertificationLevel(that.formData).then(res => {
              that.loading = false;
              that.$refs['form'].resetFields();
              that.dialogVisible = false;
              that.$parent.getData();
              that.$message({
                type: 'success',
                message: '新增成功!'
              });
            }).catch(() => {
              that.loading = false;
              that.$message({
                type: 'error',
                message: '新增失败'
              });
            });
          } else if (that.title === '编辑认证等级') {
            api_PUT_EventsManagementCompetitionCertificationLevelId(that.rowId, that.formData).then(res => {
              that.loading = false;
              that.$refs['form'].resetFields();
              that.dialogVisible = false;
              that.$parent.getData();
              that.$message({
                type: 'success',
                message: '编辑成功!'
              });
            }).catch(() => {
              that.loading = false;
              that.$message({
                type: 'error',
                message: '编辑失败'
              });
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
